<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="false" :search="false" :cart-count="false" :line-step="true" step="3" />
      </div>
    </div>
    <div class="container-width">
      <div class="bgc-white cart-container mar-t-20 mar-b-20" v-loading="isLoading" :element-loading-text="loadingText">
        <div class="flex v-align-c border-b-line pad-l-30 pad-r-30 pad-t-26 pad-b-26">
          <img :src="iconSuccess" alt="" class="width-32 height-32 mar-r-10">
          <div>
            <div class="font-20">订单提交成功，请尽快付款！订单编号：{{payOrderInfo.orderNo}}</div>
            <div class="pad-t-4">请您在<span class="font-red-1D">{{payOrderInfo.fireDateStr}}</span>内完成支付，否则订单会自动取消!
              剩余时间：<span v-html="countDown"></span></div>
          </div>
        </div>
        <div class="flex flex-between v-align-t pad-l-30 pad-r-30 pad-t-24 pad-b-28">
          <div>
            <div class="info-w flex">
              <span>收货信息：</span>
              <div class="flex-item">
                <span class="pad-r-20">{{payOrderInfo.customerFullAddress}}</span>
                <span class="pad-r-20">收货人：{{payOrderInfo.customerNickname}}</span>
                <span>手机：{{payOrderInfo.customerPhone}}</span>
              </div>
            </div>
            <div class="info-w flex pad-t-12">
              <span>商品信息：</span>
              <div>
                <div class="flex-item" v-for="(item, index) of payOrderInfo.goodsNameList" :key="index">{{item}}</div>
              </div>
            </div>
          </div>
          <el-button type="text" class="detail-btn-t mar-t--8">查看订单详情</el-button>
        </div>
        <div class="flex v-align-c border-t-line border-b-line pad-l-30 pad-r-30 pad-t-26 pad-b-24">
          支付金额：<span class="font-20 font-w font-price-00B">￥{{payOrderInfo.orderPrice}}</span>
        </div>
        <div class="flex pad-l-30 pad-t-20">
          <div>
            <div v-for="(item, index) in payType" :key="index" class="select-radio-box cursor-p flex v-align-c mar-b-12"
              :class="item.id === payForm.payType ? 'actived' : ''" @click="paySelType(item.id)">
              <span class="select-radio mar-r-14" />
              <img :src="item.url" alt="">
            </div>
          </div>
        </div>
        <el-button class="sure-pay-btn mar-l-30 mar-t-28 mar-b-30" @click="payScan">确定付款</el-button>
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import iconSuccess from '@/assets/images/icon_success.png'
  import payTypeAli from '@/assets/images/pay_type_ali.png'
  import payTypeWechat from '@/assets/images/pay_type_wechat.png'
  import {
    getPayOrderInfo,
    getOrderPayQrCode
  } from '@/api/order/order'
  import {
    ElMessage
  } from 'element-plus'
  import QRCode from 'qrcode'
  export default defineComponent({
    name: 'Cart',
    components: {
      headerLogin,
      logoBar,
      footerLinks,
      footerInfos
    },
    setup() {
      const router = useRouter()
      const orderId = router.currentRoute.value.query.orderId
      const payType = ref( < any > [])
      const payOrderInfo = ref({})
      let countDown = ref('')
      let timer = ref('')
      const isLoading = ref(true)
      const loadingText = ref('加载中...')
      const payForm = ref({
        orderId: orderId,
        orderNo: '',
        payOrderAmount: 0,
        payType: 46,
        payCode: '',
        batPayId: ''
      })
      onMounted(() => {
        payType.value = [{
            url: payTypeAli,
            type: 'alipay',
            id: 46
          },
          {
            url: payTypeWechat,
            type: 'wechat',
            id: 36
          }
        ]
        initPayOrderInfo()
      })
      const paySelType = (value: number) => {
        payForm.value.payType = value
      }
      const payScan = () => {
        getPayCode()
        // router.push({ path: '/buy/pay-scan' , query: payForm.value})
      }
      const initPayOrderInfo = () => {
        loadingText.value = '加载中...'
        getPayOrderInfo(orderId).then(response => {
          isLoading.value = false
          if (response.isError) return
          payOrderInfo.value = response.data
          payOrderInfo.value.fireDateStr = computeDate(payOrderInfo.value.fireDate)
          payForm.value.orderNo = payOrderInfo.value.orderNo
          // 开启定时器
          timer = setInterval(startTimer, 1000)
        })
      }
      const computeDate = (mill) => {
        let date = 0,
          hour = 0,
          minute = 0
        if (mill / (24 * 60 * 60 * 1000) >= 1) {
          date = Math.floor(mill / (24 * 60 * 60 * 1000))
          mill = mill % (24 * 60 * 60 * 1000)
        }
        if (mill / (60 * 60 * 1000) >= 1) {
          hour = Math.floor(mill / (60 * 60 * 1000))
          mill = mill % (60 * 60 * 1000)
        }
        if (mill / (60 * 1000) >= 1) {
          minute = Math.floor(mill / (60 * 1000))
          mill = mill % (60 * 1000)
        }
        let dateStr = ''
        if (date !== 0) dateStr += date + '天'
        if (hour !== 0) dateStr += hour + '小时'
        if (minute !== 0) dateStr += minute + '分钟'
        return dateStr
      }
      const countDownDate = (mill) => {
        if (mill < 1000) {
          clearInterval(timer)
          return '0秒'
        }
        let date = 0,
          hour = 0,
          minute = 0,
          second = 0
        if (mill / (24 * 60 * 60 * 1000) >= 1) {
          date = Math.floor(mill / (24 * 60 * 60 * 1000))
          mill = mill % (24 * 60 * 60 * 1000)
        }
        if (mill / (60 * 60 * 1000) >= 1) {
          hour = Math.floor(mill / (60 * 60 * 1000))
          mill = mill % (60 * 60 * 1000)
        }
        if (mill / (60 * 1000) >= 1) {
          minute = Math.floor(mill / (60 * 1000))
          mill = mill % (60 * 1000)
        }
        second = Math.floor(mill / 1000)
        let dateStr = ''
        if (date !== 0) dateStr += '<span class="font-red-1D">' + date + '</span>天'
        if (hour !== 0) dateStr += '<span class="font-red-1D">' + hour + '</span>小时'
        if (minute !== 0) dateStr += '<span class="font-red-1D">' + (minute < 10 ? '0' + minute : minute) +
          '</span>分'
        dateStr += '<span class="font-red-1D">' + (second < 10 ? '0' + second : second) + '</span>秒'
        return dateStr
      }
      const startTimer = () => {
        const mill = new Date(payOrderInfo.value.createTime).getTime() +
          parseInt(payOrderInfo.value.fireDate) - new Date().getTime()
        countDown.value = countDownDate(mill)
      }
      const getPayCode = () => {
        loadingText.value = '正在唤起支付中...'
        isLoading.value = true
        getOrderPayQrCode(orderId, payForm.value.payType).then(response => {
          isLoading.value = false
          if (response.isError) return
          const data = response.data
          payForm.value.payOrderAmount = data.payOrderAmount
          // payForm.value.batPayId = data.batPayId
          QRCode.toDataURL(data.resultData).then(url => {
            payForm.value.payCode = url
            router.push({
              path: '/buy/pay-scan',
              query: payForm.value
            })
          })
        })
      }
      return {
        paySelType,
        iconSuccess,
        payType,
        payTypeAli,
        payTypeWechat,
        payScan,
        payOrderInfo,
        payForm,
        countDown,
        isLoading,
        loadingText
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $bgBorder: #f5f6fa;

  .cart-container {
    min-height: 500px;

    .border-b-line {
      border-bottom: $bgBorder 1px solid;
    }

    .border-t-line {
      border-top: $bgBorder 10px solid;
    }

    .info-w {
      width: 656px;
      line-height: 1.7;
    }

    .select-radio-box {
      &.actived {
        img {
          border: #ff5310 2px solid;
        }

        .select-radio {
          background-position: 0 0;
        }
      }

      img {
        width: 136px;
        height: 50px;
        border: #ffffff 2px solid;
        box-sizing: content-box;
      }

      .select-radio {
        background: url('@/assets/images/icon_radio_1.png') no-repeat 0 0;
        background-size: 41px 20px;
        background-position: -21px 0;
        width: 20px;
        height: 20px;
      }
    }

    ::v-deep(.sure-pay-btn) {
      &.el-button {
        background: #ff500b;
        color: #fff;
        border-radius: 0;
        border: none;
        font-size: 20px;
        font-weight: bold;
        min-height: 48px;
        padding: 0 20px;
        width: 174px;
      }
    }
  }
</style>
